@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>供应商退货管理</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .search-container {
            background: #fff;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .table-container {
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .search-form .layui-form-item {
            margin-bottom: 15px;
        }
        .toolbar {
            padding: 15px;
            border-bottom: 1px solid #e6e6e6;
        }
        .status-tag {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
            display: inline-block;
        }
        .status-0 { background: #ccc; }     /* 草稿 */
        .status-1 { background: #f39c12; }  /* 待审核 */
        .status-2 { background: #27ae60; }  /* 已审核 */
        .status-3 { background: #3498db; }  /* 已完成 */
        .status-4 { background: #e74c3c; }  /* 已取消 */
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>
</head>
<body>
    <div class="layui-container-fluid">
        <!-- 搜索条件区域 -->
        <div class="search-container">
            <form class="layui-form search-form" lay-filter="searchForm">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">退货单编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="returnCode" placeholder="请输入退货单编号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">退货单名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="returnName" placeholder="请输入退货单名称" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">采购订单编号</label>
                            <div class="layui-input-block">
                                <input type="text" name="procurementCode" placeholder="请输入采购订单编号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商</label>
                            <div class="layui-input-block">
                                <input type="text" name="vendor" placeholder="请输入供应商名称" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">批次号</label>
                            <div class="layui-input-block">
                                <input type="text" name="lotNumber" placeholder="请输入批次号" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">单据状态</label>
                            <div class="layui-input-block">
                                <select name="documentStatus">
                                    <option value="">请选择状态</option>
                                    <option value="0">草稿</option>
                                    <option value="1">待审核</option>
                                    <option value="2">已审核</option>
                                    <option value="3">已完成</option>
                                    <option value="4">已取消</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">退货日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="dateRange" placeholder="选择日期范围" class="layui-input" id="dateRange">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <div class="layui-input-block" style="text-align: right; margin-left: 0;">
                                <button type="button" class="layui-btn" lay-submit lay-filter="searchBtn">
                                    <i class="layui-icon layui-icon-search"></i> 搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 数据表格区域 -->
        <div class="table-container">
            <!-- 工具栏 -->
            <div class="toolbar">
                <div class="layui-btn-group">
                    <button class="layui-btn layui-btn-sm" id="addBtn">
                        <i class="layui-icon layui-icon-add-1"></i> 新增
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="editBtn">
                        <i class="layui-icon layui-icon-edit"></i> 修改
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" id="deleteBtn">
                        <i class="layui-icon layui-icon-delete"></i> 删除
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" id="batchDeleteBtn">
                        <i class="layui-icon layui-icon-delete"></i> 批量删除
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" id="exportBtn">
                        <i class="layui-icon layui-icon-export"></i> 导出
                    </button>
                </div>
            </div>
            
            <!-- 数据表格 -->
            <table class="layui-hide" id="supplierReturnsTable" lay-filter="supplierReturnsTable"></table>
        </div>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="operationTpl">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <!-- 状态列模板 -->
    <script type="text/html" id="statusTpl">
        {{# if (d.documentStatus === 0) { }}
            <span class="status-tag status-0">草稿</span>
        {{# } else if (d.documentStatus === 1) { }}
            <span class="status-tag status-1">待审核</span>
        {{# } else if (d.documentStatus === 2) { }}
            <span class="status-tag status-2">已审核</span>
        {{# } else if (d.documentStatus === 3) { }}
            <span class="status-tag status-3">已完成</span>
        {{# } else if (d.documentStatus === 4) { }}
            <span class="status-tag status-4">已取消</span>
        {{# } else { }}
            <span class="status-tag">未知</span>
        {{# } }}
    </script>

    <script>
        layui.use(['table', 'form', 'laydate', 'layer'], function() {
            var table = layui.table;
            var form = layui.form;
            var laydate = layui.laydate;
            var layer = layui.layer;

            // 日期范围选择器
            laydate.render({
                elem: '#dateRange',
                type: 'date',
                range: true,
                format: 'yyyy-MM-dd'
            });

            // 初始化表格
            var tableIns = table.render({
                elem: '#supplierReturnsTable',
                url: '/SupplierReturns/GetPagedList',
                method: 'POST',
                page: true,
                limit: 10,
                limits: [10, 20, 50, 100],
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: 'ID', width: 80, sort: true },
                    { field: 'returnCode', title: '退货单编号', width: 150 },
                    { field: 'returnName', title: '退货单名称', width: 150 },
                    { field: 'procurementCode', title: '采购订单编号', width: 150 },
                    { field: 'vendor', title: '供应商', width: 120 },
                    { field: 'lotNumber', title: '批次号', width: 120 },
                    { field: 'returnDateString', title: '退货日期', width: 120 },
                    { field: 'documentStatus', title: '单据状态', width: 100, templet: '#statusTpl' },
                    { field: 'createTime', title: '创建时间', width: 160, templet: function(d) {
                        return layui.util.toDateString(new Date(d.createTime), 'yyyy-MM-dd HH:mm:ss');
                    }},
                    { title: '操作', width: 150, templet: '#operationTpl', fixed: 'right' }
                ]],
                request: {
                    pageName: 'pageNumber',
                    limitName: 'pageSize'
                },
                response: {
                    statusName: 'success',
                    statusCode: true,
                    msgName: 'message',
                    countName: 'totalCount',
                    dataName: 'items'
                },
                parseData: function(res) {
                    return {
                        success: res.success,
                        message: res.message,
                        totalCount: res.data ? res.data.totalCount : 0,
                        items: res.data ? res.data.items : []
                    };
                }
            });

            // 搜索
            form.on('submit(searchBtn)', function(data) {
                var searchData = data.field;
                
                // 处理日期范围
                if (searchData.dateRange) {
                    var dates = searchData.dateRange.split(' - ');
                    if (dates.length === 2) {
                        searchData.startReturnDate = dates[0];
                        searchData.endReturnDate = dates[1];
                    }
                }
                delete searchData.dateRange;

                tableIns.reload({
                    where: searchData,
                    page: { curr: 1 }
                });
                return false;
            });

            // 重置搜索
            $('.layui-btn-primary').click(function() {
                $('.search-form')[0].reset();
                tableIns.reload({
                    where: {},
                    page: { curr: 1 }
                });
            });

            // 新增
            $('#addBtn').click(function() {
                openForm('add', '新增供应商退货');
            });

            // 编辑
            $('#editBtn').click(function() {
                var checkStatus = table.checkStatus('supplierReturnsTable');
                if (checkStatus.data.length !== 1) {
                    layer.msg('请选择一条记录进行编辑', {icon: 2});
                    return;
                }
                var data = checkStatus.data[0];
                openForm('edit', '编辑供应商退货', data.id);
            });

            // 删除
            $('#deleteBtn').click(function() {
                var checkStatus = table.checkStatus('supplierReturnsTable');
                if (checkStatus.data.length !== 1) {
                    layer.msg('请选择一条记录进行删除', {icon: 2});
                    return;
                }
                var data = checkStatus.data[0];
                deleteRecord(data.id);
            });

            // 批量删除
            $('#batchDeleteBtn').click(function() {
                var checkStatus = table.checkStatus('supplierReturnsTable');
                if (checkStatus.data.length === 0) {
                    layer.msg('请选择要删除的记录', {icon: 2});
                    return;
                }
                var ids = checkStatus.data.map(function(item) {
                    return item.id;
                });
                batchDelete(ids);
            });

            // 表格行工具事件
            table.on('tool(supplierReturnsTable)', function(obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    openForm('edit', '编辑供应商退货', data.id);
                } else if (obj.event === 'delete') {
                    deleteRecord(data.id);
                }
            });

            // 打开表单
            function openForm(action, title, id) {
                var url = '/SupplierReturns/Form?action=' + action;
                if (id) {
                    url += '&id=' + id;
                }
                
                layer.open({
                    type: 2,
                    title: title,
                    area: ['800px', '600px'],
                    maxmin: true,
                    content: url,
                    end: function() {
                        tableIns.reload();
                    }
                });
            }

            // 删除记录
            function deleteRecord(id) {
                layer.confirm('确定要删除这条记录吗？', {icon: 3, title: '提示'}, function(index) {
                    $.post('/SupplierReturns/Delete', { id: id })
                        .done(function(result) {
                            if (result.success) {
                                layer.msg('删除成功', {icon: 1});
                                tableIns.reload();
                            } else {
                                layer.msg(result.message || '删除失败', {icon: 2});
                            }
                        })
                        .fail(function() {
                            layer.msg('网络错误，请稍后重试', {icon: 2});
                        });
                    layer.close(index);
                });
            }

            // 批量删除
            function batchDelete(ids) {
                layer.confirm('确定要删除选中的 ' + ids.length + ' 条记录吗？', {icon: 3, title: '提示'}, function(index) {
                    $.post('/SupplierReturns/BatchDelete', { ids: ids })
                        .done(function(result) {
                            if (result.success) {
                                layer.msg('批量删除成功', {icon: 1});
                                tableIns.reload();
                            } else {
                                layer.msg(result.message || '批量删除失败', {icon: 2});
                            }
                        })
                        .fail(function() {
                            layer.msg('网络错误，请稍后重试', {icon: 2});
                        });
                    layer.close(index);
                });
            }

            // 导出功能
            $('#exportBtn').click(function() {
                layer.msg('导出功能开发中...', {icon: 1});
            });
        });
    </script>
</body>
</html> 